<template>
	<view class="container">
		<cover-view class="pass_box" @click="pass">
			跳过
		</cover-view>
		<!-- #ifndef MP-ALIPAY -->
		<video src="https://morgan.dingxians.cn/shipin.mp4" :controls="false" :enable-progress-gesture="false" autoplay
			class="fullscreen-video" @ended="onVideoEnd" @loadedmetadata="setInitialVideoTime"></video>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<video style="width: 100vw; height: 100vh;background-color: black;" :controls="false" :enable-progress-gesture="false" src="https://morgan.dingxians.cn/shipin.mp4" autoplay controls> </video>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			onVideoEnd() {
				this.$emit('videoEnd');
			},
			setInitialVideoTime() {
				this.$emit('InitialVideoTime');
				console.log("视频加载完成时事件");
			},
			pass() {
				this.$emit('passVideo');
			}
		}
	}
</script>
<style lang="scss">
	video::-webkit-media-controls {
		display: none !important;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		position: relative;

		.pass_box {
			position: absolute;
			background: transparent;
			color: #fff;
			top: 180rpx;
			right: 30rpx;
			text-align: center;
			z-index: 99999999999999999999999;
			width: 100rpx;
			height: 50rpx;
			border-radius: 20rpx;
			line-height: 50rpx;
			font-size: 23rpx;
			border: 1rpx solid #CCC;
			// animation: name .8s ease infinite;

			// @keyframes name {
			// 	0% {
			// 		transform: scale(0.8);
			// 	}

			// 	50% {
			// 		transform: scale(1);
			// 	}

			// 	100% {
			// 		transform: scale(0.8)
			// 	}
			// }
		}
	}

	.fullscreen-video {
		width: 100%;
		height: 100vh;
		object-fit: cover;
		/* 使视频全屏并覆盖容器 */
		position: absolute;
		z-index: 9999999;
		bottom: 0;
	}
</style>